<template>
  <game-map></game-map>
  <game-myplane
    :x="myplane.x"
    :y="myplane.y"
    @attack="createMybullet"
  ></game-myplane>
  <game-mybullet :list="mybullet"></game-mybullet>
  <game-enemyplane
    v-for="item of enemyPlanes"
    :key="item.id"
    :x="item.x"
    :y="item.y"
    @attack="createEnemyBullet"
  ></game-enemyplane>
  <game-enemybullet :list="enemyBullets"></game-enemybullet>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref } from "vue";
import GameMap from "../components/Map";
import GameMyplane from "../components/Myplane";
import GameMybullet from "../components/Mybullet";
import GameEnemyplane from "../components/EnemyPlane";
import GameEnemybullet from "../components/EnemyBullet";

import useKeyboardMove from "../utils/useKeyboardMove";

import movebullets from "../use/movebullets";
import movePlanes from "../use/movePlane";
import hitTestRectangle from "../use/hitTestRectangle";
import { useRouter } from "vue-router";

let myBulletId = 0;
const createMybulletId = () => {
  return myBulletId++;
};

let enemyPlaneId = 0;
const createEnemyPlaneId = () => {
  return enemyPlaneId++;
};

let enemyBulletId = 0;
const createEnemyBulletId = () => {
  return enemyBulletId++;
};

const useMyplane = () => {
  const myplane = reactive({
    width: 375 * 0.2,
    height: 540 * 0.2,
    x: 120,
    y: 600,
    speed: 7,
  });
  let timer = setInterval(() => {
    myplane.y -= 5;
    if (myplane.y <= 200) {
      clearInterval(timer);
      timer = null;
    }
  }, 10);

  const { moveX, moveY } = useKeyboardMove(myplane.x, myplane.y, myplane.speed);

  myplane.x = moveX;
  myplane.y = moveY;

  return { myplane };
};

const useMybullet = () => {
  const mybullet = ref([]);
  const createMybullet = (data) => {
    const bullet = {
      id: createMybulletId(),
      width: 15,
      height: 25,
      rotation: 0,
      dir: -1,
      x: data.x,
      y: data.y,
    };
    mybullet.value.push(bullet);
    // console.log(mybullet.value.length)
  };
  return { mybullet, createMybullet };
};

const useEnemyPlane = () => {
  let timer = null;
  const enemyPlanes = ref([]);
  const createEnemyPlane = () => {
    const enemyPlane = {
      id: createEnemyPlaneId(),
      width: 100,
      height: 70,
      x: Math.random() * 276,
      y: 0,
      life: 3,
    };
    enemyPlanes.value.push(enemyPlane);
    // console.log(EnemyPlane.value.length)
  };
  onMounted(() => {
    timer = setInterval(() => {
      createEnemyPlane();
    }, 1500);
  });
  onUnmounted(() => {
    clearInterval(timer);
    timer = null;
  });
  return { enemyPlanes };
};

const useEnemyBullet = () => {
  const enemyBullets = ref([]);
  const createEnemyBullet = (data) => {
    const enemyBullet = {
      id: createEnemyBulletId(),
      width: 15,
      height: 25,
      rotation: 0,
      dir: 1,
      x: data.x,
      y: data.y,
    };
    enemyBullets.value.push(enemyBullet);
    // console.log(mybullet.value.length)
  };
  return { enemyBullets, createEnemyBullet };
};

const useFight = ({
  enemyBullets,
  mybullet,
  enemyPlanes,
  myplane,
  gameOverCallback,
}) => {
  let timer = null;
  onMounted(() => {
    timer = setInterval(() => {
      movebullets(mybullet);
      movebullets(enemyBullets);
      movePlanes(enemyPlanes);

      mybullet.value.forEach((item1, index1) => {
        enemyBullets.value.forEach((item2, index2) => {
          if (hitTestRectangle(item1, item2)) {
            mybullet.value.splice(index1, 1);
            enemyBullets.value.splice(index2, 1);
          }
        });

        enemyPlanes.value.forEach((item3, index3) => {
          if (hitTestRectangle(item1, item3)) {
            mybullet.value.splice(index1, 1);
            item3.life--;
            if (item3.life <= 0) {
              //消失动画
              // console.log(item3.life)
              enemyPlanes.value.splice(index3, 1);
            }
          }
        });
      });

      enemyPlanes.value.forEach((item) => {
        if (hitTestRectangle(myplane, item) && gameOverCallback) {
          gameOverCallback();
        }
      });

      enemyBullets.value.forEach((item) => {
        if (hitTestRectangle(myplane, item) && gameOverCallback) {
          gameOverCallback();
        }
      });
    }, 20);
  });

  onUnmounted(()=>{
    clearInterval(timer)
    timer = null
  })
};

export default {
  name: "Game",
  components: {
    GameMap,
    GameMyplane,
    GameMybullet,
    GameEnemyplane,
    GameEnemybullet,
  },
  setup() {
    const router = useRouter();
    const { myplane } = useMyplane();
    const { mybullet, createMybullet } = useMybullet();
    const { enemyPlanes } = useEnemyPlane();
    const { enemyBullets, createEnemyBullet } = useEnemyBullet();
    useFight({
      mybullet,
      enemyBullets,
      enemyPlanes,
      myplane,
      gameOverCallback: function () {
        router.push("/end");
      },
    });

    return {
      myplane,
      mybullet,
      createMybullet,
      enemyPlanes,
      enemyBullets,
      createEnemyBullet,
    };
  },
};
</script>

<style lang="stylus" scoped>
.game {
  width: 100%;
}
</style>